<template>
  <!-- 商品列表页 列表商品部分 -->
  <!-- 获取父元素传来的数据 list 遍历-展示页面 -->
  <div class="product-list-content">
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-card
        v-for="(item, index) in list"
        :key="index"
        :price="item.price"
        :desc="item.subtitle"
        :title="item.name"
        :thumb="item.imageHost + item.mainImage"
        :origin-price="item.originalPrice"
        @click="$router.push('/productDetail/' + item.id)"
      />
    </van-list>
  </div>
</template>

<script>
import Vue from "vue";
import { Card, List } from "vant";
Vue.use(Card).use(List);
export default {
  data() {
    return {
      loading: false,
      finished: false,
    };
  },
  props: ["list"],
  methods:{
    onLoad(){
      this.$emit('refresh',{loading: false,finished: false})
    }
  }
};
</script>

<style scoped>
.product-list-content {
  width: 100%;
}
</style>